<template>
  <div class="maintenance-container">
    <!-- 顶部操作栏 -->
    <el-card shadow="hover" class="operation-card">
      <div class="operation-header">
        <h2 class="page-title">{{ pageTitle }}</h2>
        <div class="operation-buttons">
          <div class="left-buttons">
            <el-button v-if="submitButtonShow" :loading="buttonLoading" type="info" class="operation-btn" @click="submitForm('draft')">
              <el-icon><Document /></el-icon>暂存
            </el-button>
            <el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary" class="operation-btn" @click="submitForm('submit')">
              <el-icon><Check /></el-icon>{{ submitButtonText }}
            </el-button>
            <el-button v-if="approvalButtonShow" :loading="buttonLoading" type="success" class="operation-btn" @click="approvalVerifyOpen">
              <el-icon><Stamp /></el-icon>审批
            </el-button>
            <el-button v-if="showApprovalRecord" type="warning" class="operation-btn" @click="handleApprovalRecord">
              <el-icon><Timer /></el-icon>流程进度
            </el-button>
          </div>
          <el-button class="back-btn" @click="goBack()">
            <el-icon><Back /></el-icon>返回
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 主要内容区域 -->
    <el-card shadow="hover" class="content-card">
      <template #header>
        <div class="content-header">
          <span class="section-title">维护信息</span>
        </div>
      </template>

      <el-form
        ref="maintenanceFormRef"
        v-loading="loading"
        :disabled="routeParams.type === 'view'"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="maintenance-form"
      >
        <!-- 基本信息部分 -->
        <div class="form-section">
          <el-row :gutter="24">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="维护单号">
                <el-input v-model="form.maintenanceNo" disabled class="custom-input">
                  <template #prefix>
                    <el-tag size="small" type="info">单号</el-tag>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="维护状态">
                <el-tag :type="getStatusType(form.status)" size="large" class="status-tag">
                  {{ getStatusLabel(form.status) }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="设备" prop="deviceId">
                <el-select
                  v-if="routeParams.type === 'add' && !routeParams.deviceId"
                  v-model="form.deviceId"
                  placeholder="请选择设备"
                  class="custom-select"
                  filterable
                >
                  <el-option
                    v-for="device in availableDevices"
                    :key="device.id"
                    :label="device.deviceName"
                    :value="device.id"
                    :disabled="device.hasUnfinishedMaintenance"
                  >
                    <span>{{ device.deviceName }}</span>
                    <span v-if="device.hasUnfinishedMaintenance" class="warning-text"> (已有未完成维修单) </span>
                  </el-option>
                </el-select>
                <el-input
                  v-else
                  v-model="form.deviceName"
                  disabled
                  class="custom-input"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="维护类型" prop="maintenanceType">
                <el-select v-if="routeParams.type === 'add'" v-model="form.maintenanceType" placeholder="请选择维护类型" class="custom-select">
                  <el-option v-for="item in maintenanceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-else :value="maintenanceTypeLabel" disabled class="custom-input" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="维护时间">
                <el-date-picker
                  v-model="maintenanceTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetime"
                  placeholder="选择维护时间"
                  :default-time="new Date(2000, 1, 1, 0, 0, 0)"
                  disabled
                  class="custom-date-picker"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 维护详情部分 -->
        <div class="form-section">
          <el-divider content-position="left" class="section-divider">维护详情</el-divider>

          <el-form-item label="维护内容" prop="description">
            <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入维护内容" class="custom-textarea" />
          </el-form-item>

          <el-form-item v-if="routeParams.type !== 'add'" label="维护结果" prop="result">
            <el-input v-model="form.result" type="textarea" :rows="3" placeholder="请输入维护结果" class="custom-textarea" />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" class="custom-textarea" />
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 提交组件 -->
    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
    <!-- 审批记录 -->
    <approvalRecord ref="approvalRecordRef" />
  </div>
</template>

<script setup name="Maintenance" lang="ts">
import { addDeviceMaintenance, getDeviceMaintenance, updateDeviceMaintenance, getDeviceMaintenanceList } from '@/api/vending/maintenance';
import type { DeviceMaintenanceVO } from '@/api/vending/maintenance/types';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import { getlistDevice } from '@/api/vending/device';
import type { DeviceVO } from '@/api/vending/device/types';
import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
import { Document, Check, Stamp, Timer, Back } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const loading = ref(true);
const maintenanceTime = ref<string>('');
const deviceList = ref<DeviceVO[]>([]);

// 路由参数
const routeParams = ref<Record<string, any>>({});

// 维护类型选项
const maintenanceTypeOptions = [
  { label: '定期维护', value: 1 },
  { label: '故障维修', value: 2 },
  { label: '紧急维护', value: 3 }
];

// 提交组件
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
// 审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

const maintenanceFormRef = ref<ElFormInstance>();

const submitFormData = ref<StartProcessBo>({
  businessKey: '',
  tableName: '',
  variables: {}
});
const taskVariables = ref<Record<string, any>>({});

const initFormData: DeviceMaintenanceVO = {
  id: 0,
  deviceId: undefined,
  userId: 0,
  maintenanceNo: '',
  maintenanceType: 1,
  status: 0,
  description: '',
  startTime: '',
  endTime: '',
  result: '',
  remark: ''
};

const form = ref<DeviceMaintenanceVO>({ ...initFormData });

const rules = {
  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
  maintenanceType: [{ required: true, message: '维护类型不能为空', trigger: 'change' }],
  description: [{ required: true, message: '维护内容不能为空', trigger: 'blur' }],
  result: [{ required: routeParams.value.type !== 'add', message: '维护结果不能为空', trigger: 'blur' }]
};

// 维护类型标签的计算属性
const maintenanceTypeLabel = computed(() => {
  return maintenanceTypeOptions.find((item) => item.value === form.value.maintenanceType)?.label || '';
});

/** 获取设备列表 */
async function getDeviceList() {
  try {
    const res = await getlistDevice({});
    if (res && res.code === 200 && Array.isArray(res.data)) {
      // 获取所有未完成的维修单
      const maintenanceRes = await getDeviceMaintenanceList({
        pageNum: 1,
        pageSize: 999,
        status: 0 // 只查询待维护状态的维修单
      });
      // 获取有未完成维修单的设备ID
      const unfinishedMaintenanceDevices = new Set((maintenanceRes.rows || []).map((item: any) => item.deviceId));

      // 标记设备是否有未完成的维修单
      deviceList.value = res.data.map((device: any) => ({
        ...device,
        hasUnfinishedMaintenance: unfinishedMaintenanceDevices.has(device.id)
      }));
    }
  } catch (error) {
    console.error('获取设备列表失败:', error);
    ElMessage.error('获取设备列表失败');
  }
}

// 计算属性：获取可选择的设备列表
const availableDevices = computed(() => {
  return deviceList.value.filter((device: any) => !device.hasUnfinishedMaintenance);
});

// 生成维护单号
const generateMaintenanceNo = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  const random = Math.floor(Math.random() * 1000)
    .toString()
    .padStart(3, '0');
  return `WH${year}${month}${day}${hours}${minutes}${seconds}${random}`;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  // 新增时设置默认值
  if (routeParams.value.type === 'add') {
    form.value.status = 0; // 设置为待维护
    form.value.maintenanceNo = generateMaintenanceNo(); // 生成维护单号
    maintenanceTime.value = new Date().toISOString().replace('T', ' ').substring(0, 19); // 设置为当前时间
    // 自动填充反馈参数
    if (routeParams.value.deviceId) {
      form.value.deviceId = Number(routeParams.value.deviceId);
      // 查找设备名称
      const device = deviceList.value.find(d => d.id === Number(routeParams.value.deviceId));
      if (device) {
        form.value.deviceName = device.deviceName;
      }
    }
    if (routeParams.value.content) form.value.description = routeParams.value.content;
    // 联系方式和图片放remark
    let remark = '';
    if (routeParams.value.contact) remark += `联系方式：${routeParams.value.contact}\n`;
    if (routeParams.value.image) remark += `图片：${routeParams.value.image}`;
    if (remark) form.value.remark = remark;
    // 自动填充维护类型
    if (routeParams.value.maintenanceType) form.value.maintenanceType = Number(routeParams.value.maintenanceType);
  } else {
    maintenanceTime.value = '';
  }
  maintenanceFormRef.value?.resetFields();
};

/** 获取详情 */
const getInfo = () => {
  loading.value = true;
  buttonLoading.value = false;
  nextTick(async () => {
    try {
      if (routeParams.value.type === 'add') {
        // 新增时重置表单
        reset();
        return;
      }
      const res = await getDeviceMaintenance(routeParams.value.id);
      if (res && res.data) {
        Object.assign(form.value, res.data);
        // 如果是处理模式，设置默认值
        if (routeParams.value.type === 'update') {
          form.value.startTime = new Date().toISOString().split('T')[0] + ' 00:00:00';
          form.value.status = 1; // 设置为维护中
        }
        // 设置维护时间选择器的值
        maintenanceTime.value = form.value.startTime;
      }
    } catch (error) {
      console.error('获取维护信息失败:', error);
      ElMessage.error('获取维护信息失败');
    } finally {
      loading.value = false;
      buttonLoading.value = false;
    }
  });
};

/** 提交按钮文本 */
const submitButtonText = computed(() => {
  switch (routeParams.value.type) {
    case 'add':
      return '新增';
    case 'update':
      return '完成维护';
    default:
      return '提交';
  }
});

/** 提交按钮 */
const submitForm = async (status: string) => {
  try {
    maintenanceFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        buttonLoading.value = true;
        let res;
        // 只保留后端允许的字段
        const submitData = {
          id: form.value.id,
          deviceId: form.value.deviceId,
          userId: '',
          maintenanceNo: form.value.maintenanceNo,
          maintenanceType: form.value.maintenanceType,
          status: status === 'draft' ? 5 : 0,
          description: form.value.description,
          startTime: maintenanceTime.value,
          endTime: form.value.endTime,
          result: form.value.result,
          remark: form.value.remark
        };

        if (form.value.id) {
          res = await updateDeviceMaintenance({
            ...submitData
          });
        } else {
          res = await addDeviceMaintenance({
            ...submitData
          });
        }
        form.value = res.data;
        if (status === 'draft') {
          buttonLoading.value = false;
          proxy?.$modal.msgSuccess('暂存成功');
          proxy.$tab.closePage(proxy.$route);
          proxy.$router.go(-1);
        } else {
          await handleStartWorkFlow(res.data);
        }
      }
    });
  } catch (error) {
    console.error('提交失败:', error);
    ElMessage.error('提交失败');
  } finally {
    buttonLoading.value = false;
  }
};

// 提交申请
const handleStartWorkFlow = async (data: DeviceMaintenanceVO) => {
  try {
    submitFormData.value.tableName = 'device_maintenance';
    submitFormData.value.businessKey = data.id?.toString() || '';
    // 流程变量
    taskVariables.value = {
      entity: data
    };
    submitFormData.value.variables = taskVariables.value;
    const resp = await startWorkFlow(submitFormData.value);
    console.log(resp);
    if (submitVerifyRef.value) {
      buttonLoading.value = false;
      submitVerifyRef.value.openDialog(resp.data.taskId);
    }
  } finally {
    buttonLoading.value = false;
  }
};

// 审批记录
const handleApprovalRecord = () => {
  approvalRecordRef.value.init(form.value.id);
};

// 提交回调
const submitCallback = async () => {
  await proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};

// 返回
const goBack = () => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.go(-1);
};

// 审批
const approvalVerifyOpen = async () => {
  
  maintenanceFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const submitData = {
        id: form.value.id,
        deviceId: form.value.deviceId,
        userId: '',
        maintenanceNo: form.value.maintenanceNo,
        maintenanceType: form.value.maintenanceType,
        status: form.value.status,
        description: form.value.description,
        startTime: maintenanceTime.value,
        endTime: form.value.endTime,
        result: form.value.result,
        remark: form.value.remark
      };
      await updateDeviceMaintenance({
        ...submitData
      });
      submitVerifyRef.value.openDialog(routeParams.value.taskId);
    } else {
      // 表单验证失败时显示美化的弹窗提示
      ElMessageBox.alert(
        `<div style="text-align: center; padding: 20px 0;">
          <div style="font-size: 48px; color: #f56c6c; margin-bottom: 16px;">⚠️</div>
          <div style="font-size: 16px; color: #303133; margin-bottom: 8px; font-weight: 500;">表单验证失败</div>
          <div style="font-size: 14px; color: #606266; line-height: 1.6;">
            请检查并完善以下必填信息：<br>
            <span style="color: #f56c6c;">• 维护内容</span><br>
            <span style="color: #f56c6c;">• 维护结果</span><br>
            完善后再次点击审批按钮
          </div>
        </div>`,
        '审批提示',
        {
          confirmButtonText: '我知道了',
          type: 'warning',
          center: true,
          dangerouslyUseHTMLString: true,
          customClass: 'custom-message-box',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              done();
            }
          }
        }
      );
    }
  });
};

// 校验提交按钮是否显示
const submitButtonShow = computed(() => {
  // 新增或编辑草稿时显示提交按钮
  if (routeParams.value.type === 'add') return true;
  if (routeParams.value.type === 'update' && form.value.status === 5) return true;
  return false;
});

// 校验审批按钮是否显示
const approvalButtonShow = computed(() => {
  // 只有在审批模式下且状态为待维护时才显示审批按钮
  return routeParams.value.type === 'approval' && form.value.status === 1;
});

// 修改流程进度按钮显示逻辑
const showApprovalRecord = computed(() => {
  // 非新增且非草稿状态时显示流程进度
  return form.value && form.value.id && form.value.status !== 5 && ['view', 'approval'].includes(routeParams.value.type);
});

// 页面标题
const pageTitle = computed(() => {
  switch (routeParams.value.type) {
    case 'add':
      return '新增维护';
    case 'update':
      return form.value.status === 5 ? '编辑维护' : '处理维护';
    case 'view':
      return '查看维护';
    case 'approval':
      return '审批维护';
    default:
      return '维护管理';
  }
});

// 状态处理函数
const getStatusType = (status: number) => {
  switch (status) {
    case 0:
      return 'warning'; // 待维护
    case 1:
      return 'primary'; // 维护中
    case 2:
      return 'success'; // 已完成
    case 3:
      return 'danger'; // 已退回
    case 4:
      return 'info'; // 已作废
    case 5:
      return 'info'; // 草稿
    case 6:
      return 'info'; // 取消
    case 7:
      return 'danger'; // 终止
    default:
      return 'info';
  }
};

const getStatusLabel = (status: number) => {
  switch (status) {
    case 0:
      return '待维护';
    case 1:
      return '维护中';
    case 2:
      return '已完成';
    case 3:
      return '已退回';
    case 4:
      return '已作废';
    case 5:
      return '草稿';
    case 6:
      return '取消';
    case 7:
      return '终止';
    default:
      return '未知状态';
  }
};

onMounted(() => {
  nextTick(async () => {
    routeParams.value = proxy.$route.query;
    reset();
    loading.value = false;
    await getDeviceList();
    if (
      routeParams.value.type === 'update' ||
      routeParams.value.type === 'add' ||
      routeParams.value.type === 'view' ||
      routeParams.value.type === 'approval'
    ) {
      getInfo();
    }
  });
});
</script>

<style lang="scss" scoped>
.maintenance-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .operation-card {
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .operation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;

      .page-title {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        color: #303133;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background-color: #409eff;
          border-radius: 2px;
        }
      }

      .operation-buttons {
        display: flex;
        gap: 16px;

        .left-buttons {
          display: flex;
          gap: 12px;
        }

        .operation-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 10px 20px;
          border-radius: 6px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          .el-icon {
            font-size: 16px;
          }
        }

        .back-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 10px 20px;
          border-radius: 6px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }

  .content-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .content-header {
      padding: 16px 0;

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 18px;
          background-color: #409eff;
          border-radius: 2px;
        }
      }
    }
  }

  .maintenance-form {
    padding: 24px;

    .form-section {
      background-color: #fff;
      border-radius: 8px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      .section-divider {
        margin: 32px 0;

        :deep(.el-divider__text) {
          font-size: 16px;
          font-weight: 500;
          color: #606266;
          background-color: #fff;
          padding: 0 16px;
        }
      }
    }

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #606266;
      padding-right: 16px;
    }

    .custom-input,
    .custom-select,
    .custom-date-picker {
      width: 100%;

      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 6px;
        transition: all 0.3s;
        padding: 0 12px;

        &:hover {
          box-shadow: 0 0 0 1px #409eff inset;
        }

        &.is-focus {
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }
    }

    .custom-textarea {
      :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 6px;
        transition: all 0.3s;
        padding: 12px;

        &:hover {
          box-shadow: 0 0 0 1px #409eff inset;
        }

        &:focus {
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }
    }

    .status-tag {
      width: 100%;
      text-align: center;
      padding: 10px 0;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }

    .warning-text {
      color: #f56c6c;
      margin-left: 8px;
      font-size: 13px;
    }
  }
}

:deep(.el-card__header) {
  padding: 16px 24px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

:deep(.el-card__body) {
  padding: 24px;
}

// 添加响应式布局
@media screen and (max-width: 768px) {
  .maintenance-container {
    padding: 16px;

    .operation-header {
      flex-direction: column;
      gap: 16px;

      .operation-buttons {
        width: 100%;
        flex-direction: column;

        .left-buttons {
          flex-direction: column;
          width: 100%;

          .operation-btn {
            width: 100%;
          }
        }

        .back-btn {
          width: 100%;
        }
      }
    }

    .maintenance-form {
      padding: 16px;

      .form-section {
        padding: 16px;
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;
      }

      :deep(.el-form-item__label) {
        float: none;
        display: block;
        text-align: left;
        padding: 0 0 8px;
        line-height: 1.5;
      }

      :deep(.el-form-item__content) {
        margin-left: 0 !important;
      }

      .custom-input,
      .custom-select,
      .custom-date-picker {
        width: 100%;
      }

      .status-tag {
        width: 100%;
        margin-top: 8px;
      }

      :deep(.el-date-editor.el-input) {
        width: 100%;
      }

      :deep(.el-input-group__prepend) {
        padding: 0 8px;
      }

      :deep(.el-input__prefix) {
        .el-tag {
          margin-right: 4px;
        }
      }
    }
  }
}

// 自定义弹窗样式
:deep(.custom-message-box) {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: none;
  
  .el-message-box__header {
    background: linear-gradient(135deg, #ff6b6b 0%, #f56c6c 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 20px 24px;
    
    .el-message-box__title {
      color: white;
      font-size: 18px;
      font-weight: 600;
    }
    
    .el-message-box__headerbtn {
      .el-message-box__close {
        color: white;
        font-size: 18px;
        
        &:hover {
          color: #f0f0f0;
        }
      }
    }
  }
  
  .el-message-box__content {
    padding: 32px 24px;
    background: #fafafa;
    
    .el-message-box__message {
      padding: 0;
    }
  }
  
  .el-message-box__btns {
    padding: 16px 24px 24px;
    background: white;
    border-radius: 0 0 12px 12px;
    
    .el-button {
      border-radius: 8px;
      padding: 12px 24px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style>
